/**
  * @class Ext.Panel
  * Used to create the base structure of an Ext.Panel
  */
@mixin extjs-panel {
  .#{$prefix}panel,
  .#{$prefix}plain {
    overflow: hidden;
    position: relative;
  }

  @if $include-ie {
    // Workaround for disappearing right edge in IE6
    // @tag iezoomhack
    // .#{$prefix}ie {
    //     .#{$prefix}panel-header,
    //     .#{$prefix}panel-header-tl,
    //     .#{$prefix}panel-header-tc,
    //     .#{$prefix}panel-header-tr,
    //     .#{$prefix}panel-header-ml,
    //     .#{$prefix}panel-header-mc,
    //     .#{$prefix}panel-header-mr,
    //     .#{$prefix}panel-header-bl,
    //     .#{$prefix}panel-header-bc,
    //     .#{$prefix}panel-header-br {
    //         zoom: 1;
    //     }
    // }
    // Fix for IE8 clipping. EXTJSIV-1553
    .#{$prefix}ie8 {
      td.#{$prefix}frame-mc {
        vertical-align: top;
      }
    }
  }

  .#{$prefix}panel {
    @include border-bottom-radius($panel-body-radius);
    border: 0 solid $stroke-color;

    background-color: $content-color;
    @include border-radius($panel-border-radius);
    @include background-clip(padding-box); // Used to improve jaggies of overlapping border-radius
  }

  .#{$prefix}panel-default.#{$prefix}tab-panel {
    @include border-radius(0);
  }

  //panel header
  .#{$prefix}panel-header {
    padding: $panel-header-padding;
    border: 0 solid $neutral-color;
    border-bottom-width: 0;

    .#{$prefix}panel-header-body,
    .#{$prefix}panel-header-body > .x-box-inner {
      overflow: visible;
    }
  }

  .#{$prefix}panel-header-icon,
  .#{$prefix}window-header-icon {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: 0 0;
    vertical-align: middle;
    margin-right: 4px;
    margin-top: -1px;
    margin-bottom: -1px;
  }

  .#{$prefix}panel-header-draggable,
  .#{$prefix}panel-header-draggable .#{$prefix}panel-header-text,
  .#{$prefix}window-header-draggable,
  .#{$prefix}window-header-draggable .#{$prefix}window-header-text {
    cursor: move;
  }

  // A ghost is just a Panel. The only extra it needs is opacity.
  // TODO: Make opacity a variable
  .#{$prefix}panel-ghost, .#{$prefix}window-ghost {
    @include opacity(0.65);
    cursor: move;
  }

  .#{$prefix}panel-header-horizontal, .#{$prefix}window-header-horizontal, .#{$prefix}btn-group-header-horizontal {
    .#{$prefix}panel-header-body, .#{$prefix}window-header-body, .#{$prefix}btn-group-header-body {
      width: 100%;
    }
  }

  .#{$prefix}panel-header-vertical, .#{$prefix}window-header-vertical, .#{$prefix}btn-group-header-vertical {
    .#{$prefix}panel-header-body, .#{$prefix}window-header-body, .#{$prefix}btn-group-header-body {
      height: 100%;
    }
  }

  .#{$prefix}panel-header-text-container {
    @extend .overflow-ellipsis;
  }

  .#{$prefix}panel-header-text {
    @extend .no-select;
  }

  .#{$prefix}panel-header-left,
  .#{$prefix}panel-header-right {
    .#{$prefix}vml-base {
      left: -3px !important;
    }
  }

  //panel body
  .#{$prefix}panel-body {
    overflow: hidden;
    position: relative;
    @include background-clip(padding-box);
  }

  // Framed panel

  .#{$prefix}panel-default-framed {
    padding: $panel-frame-padding;

    .#{$prefix}panel-body {
      @include border-radius($panel-body-radius);
      border: 0;
    }
  }

  .#{$prefix}panel-hasheader-top,
  .#{$prefix}window-hasheader-top {
    padding-top: 0 !important;
  }

  .#{$prefix}panel-hasheader-bottom,
  .#{$prefix}window-hasheader-bottom {
    padding-bottom: 0 !important;
  }

  .#{$prefix}panel-hasheader-left,
  .#{$prefix}window-hasheader-left {
    padding-left: 0 !important;
  }

  .#{$prefix}panel-hasheader-right,
  .#{$prefix}window-hasheader-right {
    padding-right: 0 !important;
  }

  // Vertical/horizontal headers

  .#{$prefix}panel-header-vertical .#{$prefix}surface {
    margin-top: 2px;
  }

  .#{$prefix}panel-header-plain-vertical .#{$prefix}surface {
    margin-top: 0;
  }

  //    .#{$prefix}panel-collapsed {
  //        .#{$prefix}panel-header-collapsed-border-top {
  //            border-bottom-width: 1px !important;
  //        }
  //        .#{$prefix}panel-header-collapsed-border-right {
  //            border-left-width: 1px !important;
  //        }
  //        .#{$prefix}panel-header-collapsed-border-bottom {
  //            border-top-width: 1px !important;
  //        }
  //        .#{$prefix}panel-header-collapsed-border-left {
  //            border-right-width: 1px !important;
  //        }
  //    }

  @if not $supports-gradients or $compile-all {
    .#{$prefix}nlg .#{$prefix}panel-header-vertical {
      .#{$prefix}frame-mc {
        background-repeat: repeat-y;
      }
    }
  }

  @if $include-panel-uis == true {
    @include extjs-panel-ui(
                    'default',
            $ui-base-color: $panel-base-color,
            $ui-border-width: $panel-border-width,
            $ui-border-color: $panel-border-color,
            $ui-border-radius: $panel-border-radius,
            $ui-header-color: $panel-header-color,
            $ui-header-font-size: $panel-header-font-size,
            $ui-header-font-weight: $panel-header-font-weight,
            $ui-header-border-color: $panel-header-border-color,
            $ui-header-border-width: $panel-header-border-width,
            $ui-header-background-color: $panel-header-background-color,
            $ui-header-background-gradient: $panel-header-background-gradient,
            $ui-body-color: $panel-body-color,
            $ui-body-border-width: $panel-body-border-width,
            $ui-body-border-color: $panel-body-border-color,
            $ui-body-background-color: $panel-body-background-color
    );

    @include extjs-panel-ui(
                    'default-framed',
            $ui-base-color: $panel-base-color,
            $ui-border-width: $panel-frame-border-width,
            $ui-border-color: $panel-frame-border-color,
            $ui-border-radius: $panel-frame-border-radius,
            $ui-header-color: $panel-header-color,
            $ui-header-font-size: $panel-header-font-size,
            $ui-header-font-weight: $panel-header-font-weight,
            $ui-header-border-color: $panel-frame-border-color,
            $ui-header-background-color: $panel-header-background-color,
            $ui-header-background-gradient: $panel-header-background-gradient,
            $ui-body-color: $panel-frame-body-color,
            $ui-body-border-color: $panel-body-border-color,
            $ui-body-background-color: $panel-body-background-color
    );
  }

  .#{$prefix}panel-header-plain,
  .#{$prefix}panel-body-plain {
    border: 0;
    padding: 0;
  }
}

/**
  * @class Ext.Panel
  * Used to create a visual theme for an Ext.Panel
  */
@mixin extjs-panel-ui(
  $ui-label,

  $ui-base-color: null,

  $ui-border-color: null,
  $ui-border-radius: null,
  $ui-border-width: 0,

  $ui-header-color: null,
  $ui-header-font-family: $panel-header-font-family,
  $ui-header-font-size: $panel-header-font-size,
  $ui-header-font-weight: $panel-header-font-weight,
  $ui-header-border-width: $panel-header-border-width,
  $ui-header-border-color: $ui-border-color,
  $ui-header-background-color: null,
  $ui-header-background-gradient: matte,
  $ui-header-inner-border-color: null,

  $ui-body-color: null,
  $ui-body-border-color: null,
  $ui-body-border-width: null,
  $ui-body-border-style: solid,
  $ui-body-background-color: null,
  $ui-body-font-size: null,
  $ui-body-font-weight: null
) {
  @if $ui-base-color != null {
    @if $ui-border-color == null {
      $ui-border-color: $ui-base-color;
    }

    @if $ui-header-color == null {
      $ui-header-color: #fff;
    }
    @if $ui-header-background-color == null {
      $ui-header-background-color: lighten($ui-base-color, 15);
    }
  }

  @if $ui-header-inner-border-color == null and $ui-header-background-color != null {
    $ui-header-inner-border-color: lighten($ui-header-background-color, 10);
  }

  .#{$prefix}panel-#{$ui-label} {
    @if $ui-border-color != null {
      border-color: $ui-border-color;
    }
    background: $ui-base-color;

    @if $ui-border-radius != null {
      @include border-radius($ui-border-radius);
    }

    @if $ui-header-border-width != null {
      .#{$prefix}panel-header-collapsed-border-top {
        border-bottom-width: $ui-header-border-width !important;
      }
      .#{$prefix}panel-header-collapsed-border-right {
        border-left-width: $ui-header-border-width !important;
      }
      .#{$prefix}panel-header-collapsed-border-bottom {
        border-top-width: $ui-header-border-width !important;
      }
      .#{$prefix}panel-header-collapsed-border-left {
        border-right-width: $ui-header-border-width !important;
      }
    }
  }

  // header
  .#{$prefix}panel-header-#{$ui-label} {
    .#{$prefix}panel-header-text-container {
      @if $ui-header-font-size != null {
        font-size: $ui-header-font-size;
      }
      //            @if $include-panel-highlights {
      //                @include inset-by-background($panel-header-background-color);
      //            }
      line-height: 1.2em;
      @extend .bigtext;
    }

    @if $ui-header-border-color != null {
      border-color: $ui-header-border-color;
      border-width: $panel-border-width;
      border-style: $panel-header-border-style;
    }

    @if $ui-header-border-width != null {
      border-width: $ui-header-border-width;
    }

    @if $supports-gradients or $compile-all {
      //            @if $ui-header-background-color != null { @include background-gradient(linear-gradient(top, $ui-header-background-color, $ui-header-background-color)); }
      @if $ui-header-background-color != null {
        @include background-image(linear-gradient(top, lighten($ui-header-background-color, 5%), $ui-header-background-color 100%));
      }

      @if $panel-header-inner-border and $ui-header-inner-border-color != null {
        //                @include inner-border(
        //                    $width: $panel-header-inner-border-width,
        //                    $color: $ui-header-inner-border-color
        //                );
      }
    }
  }

  // header background images
  // @todo add these back in
  //    @if $ui-header-background-color != null and $ui-header-background-gradient != null {
  //        @if not $supports-gradients or $compile-all {
  //            .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-top {
  //                background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-label}-top-bg.gif');
  //            }

  //            .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-bottom {
  //                background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-label}-bottom-bg.gif');
  //            }

  //            .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-left {
  //                background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-label}-left-bg.gif');
  //            }

  //            .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-right {
  //                background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-label}-right-bg.gif');
  //            }
  //        }
  //    }

  // header text
  .#{$prefix}panel-header-#{$ui-label} .#{$prefix}panel-header-text-container {
    @if $ui-header-color != null {
      color: $ui-header-color;
    }
    @if $ui-header-font-size != null {
      font-size: $ui-header-font-size;
    }
    @if $ui-header-font-weight != null {
      font-weight: $ui-header-font-weight;
    }
    @if $ui-header-font-family != null {
      font-family: $ui-header-font-family;
    }
  }

  // body
  .#{$prefix}panel-body-#{$ui-label} {
    @if $ui-body-background-color != null {
      background: $ui-body-background-color;
    }
    @if $ui-body-border-width != null {
      margin: $ui-body-border-width;
    }
    @if $ui-body-color != null {
      color: $ui-body-color;
    }
    @if $ui-body-font-size != null {
      font-size: $ui-body-font-size;
    }
    @if $ui-body-font-weight != null {
      font-size: $ui-body-font-weight;
    }
  }

  .#{$prefix}panel-collapsed {
    .#{$prefix}window-header-#{$ui-label},
    .#{$prefix}panel-header-#{$ui-label} {
      @if $ui-body-border-color != null {
        border-color: $ui-body-border-color;
      }
    }
  }

  .#{$prefix}panel-header-#{$ui-label}-vertical {
    @if $ui-body-border-color != null {
      border-color: $ui-body-border-color;
    }
  }

  //    @if $ui-base-color != null {
  //        @if $supports-gradients or $compile-all {
  //            .#{$prefix}panel-header-#{$ui-label}-left,
  //            .#{$prefix}panel-header-#{$ui-label}-right {
  //                @include background-gradient($ui-header-background-color, $ui-header-background-gradient, right);
  //            }
  //        }
  //    }

  @if $ui-border-radius != null {
    // @include x-frame(
    //     'panel',
    //     $ui: '#{$ui-label}',

    //     /* Radius, width, padding and background-color */
    //     $border-radius   : $ui-border-radius,
    //     $border-width    : $ui-border-width,
    //     $padding         : $panel-frame-padding,
    //     $background-color: $ui-base-color
    // );


    // @include x-frame('panel-header', '#{$ui-label}-top',    top($ui-border-radius) right($ui-border-radius) 0 0,    $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient);
    // @include x-frame('panel-header', '#{$ui-label}-right',  0 right($ui-border-radius) bottom($ui-border-radius) 0, $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient, false, right);
    // @include x-frame('panel-header', '#{$ui-label}-bottom', 0 0 bottom($ui-border-radius) left($ui-border-radius),  $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient);
    // @include x-frame('panel-header', '#{$ui-label}-left',   top($ui-border-radius) 0 0 left($ui-border-radius),     $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient, false, right);

    .#{$prefix}panel-header-#{$ui-label}-top {
      @include border-top-radius($ui-border-radius);
      //            @include inner-border(1px 1px 0 1px, $ui-header-inner-border-color);
    }

    //        .#{$prefix}panel-header-#{$ui-label}-right {
    //            @include inner-border(1px 1px 1px 0, $ui-header-inner-border-color);
    //        }

    //        .#{$prefix}panel-header-#{$ui-label}-bottom {
    //            @include inner-border(0 1px 1px 1px, $ui-header-inner-border-color);
    //        }

    //        .#{$prefix}panel-header-#{$ui-label}-left {
    //            @include inner-border(1px 0 1px 1px, $ui-header-inner-border-color);
    //        }

    .#{$prefix}panel-collapsed {
      .#{$prefix}panel-header-#{$ui-label}-top {
        @include border-bottom-radius($ui-border-radius);
      }

      .#{$prefix}panel-header-#{$ui-label}-right {
        @include border-left-radius($ui-border-radius);
      }

      .#{$prefix}panel-header-#{$ui-label}-bottom {
        @include border-top-radius($ui-border-radius);
      }

      .#{$prefix}panel-header-#{$ui-label}-left {
        @include border-right-radius($ui-border-radius);
      }
    }

  } @else {
    //        .#{$prefix}panel-collapsed {
    //            .#{$prefix}panel-header-#{$ui-label}-top {
    //                @include border-bottom-radius($ui-border-radius);
    //            }

    //            .#{$prefix}panel-header-#{$ui-label}-right {
    //                @include border-left-radius($ui-border-radius);
    //            }

    //            .#{$prefix}panel-header-#{$ui-label}-bottom {
    //                @include border-top-radius($ui-border-radius);
    //            }

    //            .#{$prefix}panel-header-#{$ui-label}-left {
    //                @include border-right-radius($ui-border-radius);
    //            }
    //        }

    .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-right {
      //            background-position: top right;
    }

    //        .#{$prefix}panel-header-#{$ui-label}-top {
    //            @include inner-border(1px 0 0 0, $ui-header-inner-border-color);
    //        }

    //        .#{$prefix}panel-header-#{$ui-label}-right {
    //            @include inner-border(0 1px 0 0, $ui-header-inner-border-color);
    //        }

    //        .#{$prefix}panel-header-#{$ui-label}-bottom {
    //            @include inner-border(0 0 1px, $ui-header-inner-border-color);
    //        }

    //        .#{$prefix}panel-header-#{$ui-label}-left {
    //            @include inner-border(0 0 0 1px, $ui-header-inner-border-color);
    //        }
  }

  .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-bottom {
    background-position: bottom left;
  }

  @if $ui-border-radius != null {

    // Why does adding a border radius require a border?

    // .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-top {
    //     border-bottom-width: 1px !important;
    // }

    // .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-right {
    //     border-left-width: 1px !important;
    // }

    // .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-bottom {
    //     border-top-width: 1px !important;
    // }

    // .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-left {
    //     border-right-width: 1px !important;
    // }

    .#{$prefix}panel-header-#{$ui-label}-collapsed {
      @include border-radius($ui-border-radius);
    }


    // These
    // @tag deleted
    // @include x-frame('panel-header', '#{$ui-label}-collapsed-top',    top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient);
    // @include x-frame('panel-header', '#{$ui-label}-collapsed-right',  top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient, false, right);
    // @include x-frame('panel-header', '#{$ui-label}-collapsed-bottom', top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient);
    // @include x-frame('panel-header', '#{$ui-label}-collapsed-left',   top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient, false, right);
  }

  //background positioning of images
  // @tag deleted
  // .#{$prefix}panel-header-#{$ui-label}-right-tc,
  // .#{$prefix}panel-header-#{$ui-label}-right-mc,
  // .#{$prefix}panel-header-#{$ui-label}-right-bc {
  //     background-position: right 0;
  // }

  // .#{$prefix}panel-header-#{$ui-label}-bottom-tc,
  // .#{$prefix}panel-header-#{$ui-label}-bottom-mc,
  // .#{$prefix}panel-header-#{$ui-label}-bottom-bc {
  //     background-position: 0 bottom;
  // }
}